<template>
  <view class="container">
    <view class="header">
      <text class="title">学生信息管理系统</text>
      <image src="/static/logo.png" class="logo" v-if="showLogo" />
    </view>
    
    <view class="content">
      <view v-if="showForm">
        <student-form 
          :student="currentStudent" 
          @submit="handleSubmit" 
          @cancel="showForm = false" 
        />
      </view>
      
      <view v-else>
        <button class="add-btn" @click="showAddForm">添加学生</button>
      </view>
      
      <student-list 
        :students="students" 
        @edit="editStudent" 
        @delete="deleteStudent" 
      />
    </view>
  </view>
</template>

<script>
import { ref } from 'vue';
import StudentList from '@/components/student-list.vue';
import StudentForm from '@/components/student-form.vue';
import studentsData from '@/data/students';

export default {
  components: {
    StudentList,
    StudentForm
  },
  setup() {
    const students = ref([...studentsData]);
    const showForm = ref(false);
    const currentStudent = ref(null);
    const showLogo = ref(true);

    const showAddForm = () => {
      currentStudent.value = null;
      showForm.value = true;
    };

    const editStudent = (student) => {
      currentStudent.value = student;
      showForm.value = true;
    };

    const deleteStudent = (id) => {
      uni.showModal({
        title: '删除确认',
        content: '确定要删除该学生信息吗？',
        success: (res) => {
          if (res.confirm) {
            students.value = students.value.filter(s => s.id !== id);
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          }
        }
      });
    };

    const handleSubmit = (studentData) => {
      if (studentData.id) {
        // 更新学生
        const index = students.value.findIndex(s => s.id === studentData.id);
        if (index !== -1) {
          students.value[index] = studentData;
          uni.showToast({
            title: '更新成功',
            icon: 'success'
          });
        }
      } else {
        // 添加新学生
        const newId = Math.max(...students.value.map(s => s.id), 0) + 1;
        students.value.push({
          ...studentData,
          id: newId
        });
        uni.showToast({
          title: '添加成功',
          icon: 'success'
        });
      }
      showForm.value = false;
    };

    return {
      students,
      showForm,
      currentStudent,
      showLogo,
      showAddForm,
      editStudent,
      deleteStudent,
      handleSubmit
    };
  }
}
</script>

<style>
.container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.content {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.add-btn {
  background-color: #4a9cff;
  color: white;
  margin-bottom: 20px;
}
</style>